<template>
	<view>
		<nav-custom></nav-custom>
		<view v-if="glist.length==0" class="noData">
			没有查询到商品
		</view>
		<view class="cont" v-else>
			<good-item v-for="(item,index) in glist" :gdata="item"></good-item>
		</view>
		<tab-custom></tab-custom>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				glist: [],
				page:0
			}
		},
		computed:{
			condition() {
				return this.$store.state.condition.cond
			}
		},
		methods: {
			handleDetail(index) {
				// console.log(index);
				uni.navigateTo({
					url: '../detail/detail?id='+index
				})
			},
			loadData() {
				let skip = this.page * 8
				let wh = JSON.stringify(this.condition)
				let url = `/1.1/classes/goods?where=${wh}&limit=8&skip=${skip}`
				this.$get(url).then(res => {
					uni.stopPullDownRefresh()
					let {results} = res
					if(results.length) {
						this.page++
						this.glist = [...this.glist,...results]
						return
					}
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
				})
			},
			reloadData() {
				// 刷新页面数据
				this.glist = []
				this.page = 0
				this.loadData()
			},
		},
		onLoad() {
			this.loadData()
			
		},
		onReachBottom() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.reloadData()
		}
	}
</script>

<style lang="scss">
page {
	padding: 90upx 0 120upx;
}
.cont {
	display: flex;
	flex-wrap: wrap;
	padding: 15upx;
	justify-content: space-between;
}
.cake-item {
	width: 350upx;
	.poster {
		height: 350upx;
		background-color: #f5f5f5;
	}
	.fs-28 {
		margin-top: 24upx;
	}
	.fs-16 {
		margin: 14upx 0;
	}
	.fs-18 {
		margin-bottom: 22upx;
	}
}
.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
}
.cu-tag {
	margin-left: 10upx;
}
.noData {
	width: 100%;
	text-align: center;
	height: 40upx;
	line-height: 40upx;
	margin-top: 100upx;
}
</style>
